<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <title>User Registration</title>
    </h:head>
    <h:form>
        
        <f:view beforePhase="#{UserDisplayManagedBean.doDisplay}">
            <h:body>
                <p:ajaxStatus style="width:16px;height:16px;">  
                    <f:facet name="start">  
                        <h:graphicImage value="../design/ajaxloading.gif" />  
                    </f:facet>  

                    <f:facet name="complete">  
                        <h:outputText value="" />  
                    </f:facet>  
                </p:ajaxStatus>

                <!-- IDLE DIALOG for -->
                <p:confirmDialog message="You have been idle for 5 minutes. Do you want to continue?"  
                                 showEffect="bounce" hideEffect="explode"  
                                 header="Warning message" severity="alert" widgetVar="confirmation">  
                    <p:commandButton value="Yes" onclick="confirmation.hide()" type="button" /> 
                    <p:commandButton value="No" update="panel" oncomplete="confirmation.hide()"  
                                     actionListener="#{UserManagedBean.doLogout}" /> 
                </p:confirmDialog>

                <p:idleMonitor timeout="300000" onidle="confirmation.show()" />  
                <!--END OF IDLE DIALOG-->

                <div id="top">
                    <h:graphicImage url="/image/newHeader.jpg"/> 
                </div>

                <div id="content">
                    <table>
                        <tr>
                            <td style="vertical-align: top">
                                <p:toolbar style="font-size:80%;height:33px;width:207px"> 
                                    <p:toolbarGroup align="right">
                                        <p:button title="Home" image="ui-icon-home" outcome="AdminDeptWorkspace"/>
                                        <p:button title="Notes" image="ui-icon-note"/>
                                        <p:button title="Mail" outcome="messages"  image="ui-icon-mail-closed"/>     
                                        <p:button title="Edit Preferences" image="ui-icon-gear"/>
                                        <p:button title="Help" image="ui-icon-help"/>
                                        <p:commandButton immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                    </p:toolbarGroup>
                                </p:toolbar>

                                <p:menu style="width:201px; height:610px; font-family: Tahoma;border-style: double;">  
                                    <p:submenu label="Admin Department">  
                                        <p:menuitem value="Home" url="http://localhost:8080/MerlionERP-war/userManagement/AdminDeptWorkspace.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                    </p:submenu>  
                                </p:menu>
                                 <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>
                                
                            </td>
                            <td>
                                 <h:graphicImage value="registration.jpeg" style="width:35px;height:35px" />
                                    <h:outputText value="         "/>
                                    <h:outputText value="Registration Form" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                    <p:spacer width="100" height="10"/>

                                <p:panel id="panel" style="width:1122px; height:770px">
                                    <h:panelGrid columns="4">

                                        <h:outputText value="Email"/>
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" validator="#{UserManagedBean.validateEmail}" value="#{UserManagedBean.email}" id="email" required="true" requiredMessage="Email is required."/>
                                        <p:message for="email"/>

                                        <h:outputText value="Name"/>
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" value="#{UserManagedBean.name}" id="name" required="true" requiredMessage="Name is required."/>
                                        <p:message for="name"/>

                                        <h:outputText value="Password " />
                                        <h:outputText value=":"/>
                                        <h:inputSecret style="width:250px" validatorMessage="Password must be between 6 to 10 characters" value="#{UserManagedBean.password}" id="password" required="true" requiredMessage="Password is required.">
                                            <f:validateLength minimum="6" maximum="10" />
                                        </h:inputSecret>
                                        <p:message for="password"/>

                                        <h:outputText value="Address " />
                                        <h:outputText value=":"/>
                                        <p:inputTextarea  style="width:250px; height: 100px" value="#{UserManagedBean.address}" id="address" required="true" requiredMessage="Address is required."/>
                                        <p:message for="address"/>

                                        <h:outputText value="Phone number " />
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" value="#{UserManagedBean.phoneNumber}" id="phoneNumber" required="true" requiredMessage="Phone Number is required."/>
                                        <p:message for="phoneNumber"/>

                                        <h:outputText value="Gender " />
                                        <h:outputText value=":"/>
                                        <h:selectOneMenu value="#{UserManagedBean.gender}" id="gender">
                                            <f:selectItem itemLabel="Male" itemValue="Male" />
                                            <f:selectItem itemLabel="Female" itemValue="Female" />
                                        </h:selectOneMenu>
                                        <p:message for="gender"/>

                                        <h:outputText value="City " />
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" value="#{UserManagedBean.city}" id="city" required="true" requiredMessage="City is required."/>
                                        <p:message for="city"/>

                                        <h:outputText value="Country " />
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" value="#{UserManagedBean.country}" id="country" required="true" requiredMessage="Country is required."/>
                                        <p:message for="country"/>

                                        <h:outputText value="Roles " />
                                        <h:outputText value=":"/>
                                        <h:selectManyCheckbox id="role" required="true" requiredMessage="Minimum 1 role must be chosen." layout="pageDirection" style="outline-style: none; border-style: none;" value="#{UserManagedBean.roles}" > 
                                            <f:selectItem itemLabel="Customer Executive" itemValue="Customer Executive" />
                                            <f:selectItem itemLabel="Finance Executive" itemValue="Finance Executive" />
                                            <f:selectItem itemLabel="Production Executive" itemValue="Production Executive" />
                                            <f:selectItem itemLabel="Supply Chain Executive" itemValue="Supply Chain Executive" />
                                            <f:selectItem itemLabel="Customer Executive Manager" itemValue="Customer Executive Manager" />
                                            <f:selectItem itemLabel="Finance Executive Manager" itemValue="Finance Executive Manager" />
                                            <f:selectItem itemLabel="Production Executive Manager" itemValue="Production Executive Manager" />
                                            <f:selectItem itemLabel="Supply Chain Executive Manager" itemValue="Supply Chain Executive Manager" />
                                            <f:selectItem itemLabel="Technical Support Executive" itemValue="Technical Support Executive" />
                                            <f:selectItem itemLabel="President" itemValue="President" />
                                        </h:selectManyCheckbox>
                                        <p:message for="role" />

                                        <p:commandButton value="Register" update="panel" actionListener="#{UserManagedBean.doRegister}" ajax="false"/><br/>
                                    </h:panelGrid>
                                </p:panel>

                            </td>
                        </tr>
                    </table>
                </div>

                <div id="footer">
                    <h:graphicImage url="/image/merlionfooter.jpg"/> 
                </div>
            </h:body>
        </f:view>
    </h:form> 
</html>
